import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import './Home.css';
import { FormattedMessage } from 'react-intl';
import * as API from '../../api'

class Home extends Component {

  constructor(...args) {
    super(...args);
    this.state = {
      name: 'Lyle'
    }
    console.log(this, global._);
    //this.props.history.push('/login');
    API.test({});
  }

  render() {
    const { increment, decrement, counter, getNum } = this.props;
    return (
      <div className="page home">
                <header>
                    <h1>
                      <FormattedMessage 
                    　　id="intl.welcome"
                    　　defaultMessage={'welcome'}
                      />
                      <FormattedMessage
                          id="intl.name"
                          values={{name: <b>{this.state.name}</b>}}
                      />
                    </h1>
                </header>
                <p>
                  To get started
                </p>
                <ul>
                  <li><Link to="/">goto Home</Link></li>
                  <li><Link to="/login">goto Login</Link></li>
                  <li><Link to="/test">goto Test</Link></li>
                </ul>
                <p>
                    Clicked: {counter} times  
                </p>
                <p>
                    <button onClick={increment}>+</button>
                    <button onClick={decrement}>-</button>
                    <button onClick={getNum}>add ajax return 1024</button>
                </p>
            </div>
    );
  }
}

export default Home;